<template>
    <div id="wrap">

      <city-header ></city-header>
      <city-search :cities="cities"></city-search>
      <city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
      <city-aside :cities="cities" @change="cityClickChange"></city-aside>

    </div>
</template>

<script>
  import CityHeader from '@/pages/city/components/header'
  import CitySearch from '@/pages/city/components/search'
  import CityList from '@/pages/city/components/list'
  import CityAside from '@/pages/city/components/aside'
  import axios from 'axios'
    export default {
      name: "city",
      components:{
        CityHeader,
        CitySearch,
        CityList,
        CityAside
      },
      data(){
        return{
          cities:{},
          hotCities:[],
          letter:""
        }
      },
      methods:{
        getCityInfo(){
          axios.get('static/moke/city.json').then(this.getSucc)
        },
        getSucc(res){
          console.log(res.data);
          var res=res.data;
          if(res.ret && res.data){
            this.cities=res.data.cities;
            this.hotCities=res.data.hotCities

          }

        },
        cityClickChange(res){
          this.letter=res;
          // console.log(letter)
        }
      },
      mounted(){
        this.getCityInfo();
      },

    }
</script>

<style scoped>

</style>
